<template>
  <div class="mv">
    <div class="container">
      <div class="mvWrapper">
        <ul class="mvRecommendList">
          <div class="title">推荐</div>
          <li class="item" v-for="item in mvRecommendList" :key="item.id">
            <img :src="item.picUrl" :alt="item.name">
            <div>{{item.name}}</div>
            <div class="author">{{item.artistName}}</div>
          </li>
        </ul>

        <ul class="mvCategory">
          <div class="title">分类</div>
          <li v-for="(item, index) in mvCategory" :key="index" @click="handleClickNav(item)" :class="item === mvActive ? 'active' : ''">{{item}}</li>
        </ul>

        <ul class="mvList">
          <li class="item" v-for="item in mvList" :key="item.id">
            <img :src="item.cover" :alt="item.name">
            <div>{{item.name}}</div>
            <div class="author">{{item.artistName}}</div>
            <div class="playCount">
              <i class="iconfont icon-24gl-play"></i>
              <span>{{item.playCount}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Mv',
  data () {
    return {
      mvRecommendList: [], // mv推荐
      mvActive: '全部',
      mvCategory: ['全部', '内地', '港台', '欧美', '日本', '韩国'], // mv分类
      mvList: []
    }
  },
  methods: {
    async getRecommendMvList () {
      const res = await this.$http.get('/personalized/mv')
      this.mvRecommendList = res.data.result.slice(0, 3)
    },
    handleClickNav (target) {
      this.mvActive = target
      this.getMvList(this.mvActive)
    },
    async getMvList (cate) {
      const res = await this.$http.get(`/mv/all?area=${cate}`)
      this.mvList = res.data.data
    }
  },
  created () {
    this.getRecommendMvList()
    this.getMvList('')
  }
}
</script>

<style lang="less" scoped>
.mv{
  margin-top: 33px;
}
.container{
  width: 1100px;
  margin: 0 auto;
  background-color: #ffffff;
}

.mvWrapper{
  .mvRecommendList, .mvList{
    list-style: none;
    overflow: hidden;
    padding: 0 20px;
    .item{
      position: relative;
      margin: 20px 0;
      padding: 0 1.5%;
      width: 30%;
      float: left;
      text-align: center;
      img{
        width: 100%;
        height: 186px;
        margin: 0 auto;
        display: block;
      }
      div{
        margin-top: 5px;
        padding: 5px 10px;
        // 单行省略处理
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .author{
        font-size: 14px;
        color: gray;
      }
      .playCount {
        position: absolute;
        top: 5px;
        right: 15%;
        color: white;
        font-size: 13px;
        background-color: rgba(0, 0, 0, 0.1);
        i {
          margin-right: 5px;
        }
      }
    }
    .title{
      font-size: 18px;
      font-weight: 600;
      padding: 20px 0;
      border-bottom: 2px solid #c20c0c;
    }
  }

  .mvCategory{
    overflow: hidden;
    padding: 0 20px;
    margin-bottom: 20px;
    li{
      float: left;
      font-size: 18px;
      padding: 10px 20px;
      margin: 0 20px;
      cursor: pointer;
    }
    li:hover, .active{
      background-color: #e9e9e9;
    }
    .title{
      font-size: 18px;
      font-weight: 600;
      padding: 20px 0;
      border-bottom: 2px solid #c20c0c;
    }
  }
}
</style>
